<template>
  <div class="view-container" id="gui-zhang-zhi-du">
     <!--<header class="view-header">
       <div class="header-container">
         <div class="header-title">
           <i class="el-icon-s-grid"></i>
           <span>规章制度管理</span>
         </div>
         <div class="header-form">
           &lt;!&ndash;更多&ndash;&gt;
           <div class="header-form-item">
             <el-dropdown @command="handleCommand">
               <el-button plain type="default" :loading="delLoading">
                 更多<i class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
               </el-button>
               <el-dropdown-menu slot="dropdown">
                 <el-dropdown-item icon="el-icon-refresh-right" class="color-refresh-item" command="refresh">刷新</el-dropdown-item>
                 <el-dropdown-item icon="el-icon-edit" class="color-edit-item" command="edit">编辑</el-dropdown-item>
                 <el-dropdown-item icon="el-icon-delete" class="color-del-item" command="del">{{isBatchesDel}}</el-dropdown-item>
               </el-dropdown-menu>
             </el-dropdown>
           </div>
           <div class="header-form-item">
             <el-button plain type="danger" icon="el-icon-plus" @click="toAddPage">添加</el-button>
           </div>
           &lt;!&ndash;搜索&ndash;&gt;
           <div class="header-form-item">
             <el-button plain type="primary" icon="el-icon-search" @click="fetchData">查询</el-button>
           </div>
           <div class="header-form-item title-search">
             <el-input v-model.trim="searchForm.title" placeholder="标题" clearable @input="fetchData"></el-input>
           </div>
         </div>
       </div>
     </header>-->

    <list-header
      :title="'规章制度管理'"
      :delText="isBatchesDel"
      :delLoading="delLoading"
      @del="del"
      @open-edit-dialog="openEditDialog($event)"
      @fetch-data="fetchData"
    >
      <div class="header-form-item title-search" slot="search-item-1">
        <el-input v-model.trim="searchForm.title" placeholder="标题" clearable @input="AntiShake"></el-input>
      </div>
    </list-header>

    <section class="table-container view-section">
      <el-table
        ref="table"
        :data="tableData"
        stripe
        border
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" align="center"/>
        <el-table-column label="标题" sortable>
          <template slot-scope="scope">
            <el-link @click.stop="showDetail(scope.row.infoId)" v-text="scope.row.infoTitle"></el-link>
          </template>
        </el-table-column>
        <el-table-column prop="creatorName" label="发布人" align="center" sortable width="100"/>
        <el-table-column prop="created" :formatter="dateFmt" label="发布时间" align="center" sortable width="200"/>
      </el-table>
    </section>
    <footer>
      <el-pagination
        :page-sizes="[10, 20, 50, 100]"
        style="text-align: right"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        :page-size="page.size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </footer>

    <el-dialog :visible.sync="dialogShow">
      <div slot="title" class="header">
        <p class="title-1" v-text="detailObj.infoTitle"></p>
      </div>
      <div class="section gui-zhang-list">
        <p class="info">
          <span>发布人：{{detailObj.creator}}</span>
          <span>发布时间：{{detailObj.created}}</span>
        </p>
        <div class="body" v-html="detailObj.infoContent">

        </div>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import listMixin from '@/mixin/listMixin'
  import guiZhangAPI from '@/api/guiZhangZhiDu/guiZhangZhiDu'
  import ListHeader from '@/common/ListHeader'

  export default {
    name: 'GuiZhangZhiDuList',
    mixins: [listMixin],
    components: { ListHeader },
    data() {
      return {
        searchForm: {
          title: ''
        },
        mixinParams: {
          addUrl: '/gui-zhang-zhi-du/save',
          editUrl: '/gui-zhang-zhi-du/edit/',
          propertyName: 'infoId',
          API: guiZhangAPI
        },
        dialogShow: false,
        detailObj: {}
      }
    },
    created() {
    },
    methods: {
      fetchData() {
        guiZhangAPI.list(this.page, this.searchForm.title).then(res => {
          console.log(res)
          this.tableData = res.records
          this.page.total = res.total
        })
      },
      showDetail(id) {
        guiZhangAPI.getById(id).then(res=>{
          this.detailObj = res
          this.detailObj.created = new Date(this.detailObj.created).Format('yyyy-MM-dd hh:mm:ss')
          this.dialogShow = true
        })
      },
      dateFmt(row) {
        return new Date(row.created).Format('yyyy-MM-dd hh:mm:ss')
      },
      openEditDialog(isEdit){
        if(isEdit){
          /*if(this.multipleSelected.length === 0){
            this.$message.info('请选择要编辑的记录')
            return
          }
          if(this.multipleSelected.length === 0){
            this.$message.info('请选择要编辑的记录')
            return
          }*/
          this.edit()
        }else{
          this.toAddPage()
        }
      }
    }
  }
</script>


<style lang="scss">
  #gui-zhang-zhi-du {
    .el-dialog {
      min-height: 500px;
    }
  }
  .gui-zhang-list {
    a {
      color: #1890ff;
    }
  }
</style>

<style scoped lang="scss">
  .el-dialog {
    .header {
      .title-1 {
        text-align: center;
      }
    }

    .body {
      line-height: 30px;
      padding-top: 10px;
    }

    .info {
      display: flex;
      justify-content: space-between;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
      font-size: 13px;

      span {
        margin-right: 20px;
      }
    }

  }
</style>
